<template>
	<view>
		<view class="dormitoryTitle">
			<view v-for="(item,index) in dormitoryTtileArr" :key="item.id"
				@click="changeTitleFun(item,dormitoryTtileArr)">
				<span>{{item.title}}</span>
				<view class="dormitoryHealthLine" v-show="item.isShow"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "dormitoryTitle",
		data() {
			return {
				dormitoryTtileArr: [{
						id: 2,
						title: '二楼',
						isShow: true,
					},
					{
						id: 3,
						title: '三楼',
						isShow: false,
					},
					{
						id: 4,
						title: '四楼',
						isShoe: false,
					},
					{
						id: 5,
						title: '五楼',
						isShow: false,
					},
					{
						id: 6,
						title: '六楼',
						isShow: false,
					},
				],
			}
		},
		methods: {
			changeTitleFun(item, arr) {
				for (let i in arr) {
					if (item.title != arr[i].title) {
						arr[i].isShow = false
					}
				}
				item.isShow = true
			}
		}
	}
</script>

<style>
	.dormitoryHealthLine {
		width: 90rpx;
		height: 8rpx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -10rpx;
	}

	.dormitoryTitle {
		color: #0000FF;
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
	}
</style>